<template>
    <div style="min-width:1185px">
        <div v-if="$route.path == '/make'">
            <div class="vs-search-box">
                <el-form ref="form" :inline="true" :model="paging" label-width="120px">
                    <el-form-item label="门店">
                        <el-select v-model="paging.store_id" style="width:250px" placeholder="请选择">
                            <el-option
                                v-for="item in shopList"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="顾客姓名：">
                        <el-input style="width:250px" placeholder="支持任意关键字搜索" v-model="paging.name"></el-input>
                    </el-form-item>
                    <el-form-item label="" class="vs-right-btns">
                        <el-button @click="reset">重置</el-button>
                        <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                    </el-form-item>
                    <el-form-item label="手机号码：">
                        <el-input style="width:250px" placeholder="支持手机尾号4位搜索" v-model="paging.mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="订单编号：">
                        <el-input style="width:250px" placeholder="支持订单后4位搜索" v-model="paging.order_num"></el-input>
                    </el-form-item>

                    <el-form-item label="预约方式：">
                        <el-select style="width:250px" clearable v-model="paging.mode" placeholder="请选择">
                            <el-option label="大众点评" value="0"> </el-option>
                            <el-option label="小程序" value="1"> </el-option>
                            <el-option label="电话" value="2"> </el-option>
                            <el-option label="我的管家" value="3"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="预约日期：">
                        <el-date-picker
                        style="width:250px"
                        range-separator="至"
                        v-model="paging.start_date"
                        value-format="yyyy-MM-dd"
                        type="daterange" placeholder="">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="预计到店时间：">
                        <el-time-picker
                            is-range
                            style="width:250px"
                            v-model="paging.start_time"
                            range-separator="至"
                            arrow-control
                            value-format="HH:mm:ss"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            placeholder="">
                        </el-time-picker>
                    </el-form-item>
                    <!-- <el-form-item label="是否开单:">
                        <el-select style="width:250px" clearable v-model="paging.is_bill" placeholder="请选择">
                            <el-option label="已开单" value="1"> </el-option>
                            <el-option label="未开单" value="2"> </el-option>
                        </el-select>
                    </el-form-item> -->
                </el-form>
            </div>
            <div class="vs-table-box">
                <div class="operation-box clear-float">
                    <!-- <div class="title-left"> 分销列表 </div> -->
                    <!-- <el-button icon="el-icon-plus" @click="utils.goUrl('/makeInfo?title=预约添加')" style="margin-left:auto;" type="primary">新增</el-button> -->
                    <el-button style="margin-left:auto;" icon="el-icon-download" :loading="isDerive" @click="derive">导出</el-button>
                </div>
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" style="width: 100%">
                    <el-table-column label="会员标识" width="70">
                        <template slot-scope="scope">
                            <i v-if="scope.row.vip_id>0" class="el-icon-star-on"></i>
                        </template>
                    </el-table-column>
                    <el-table-column prop="id" min-width="60px" label="预约ID" ></el-table-column>
                    <el-table-column prop="re_date" label="预约日期" width="95"> </el-table-column>
                    <el-table-column prop="re_time" label="预计到店时间" width="75"> </el-table-column>
                    <el-table-column prop="username" label="顾客姓名"></el-table-column>
                    <el-table-column label="性别" width="50">
                        <template slot-scope="scope">
                            {{scope.row.gender | typeGender}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="phone" label="手机号码"> </el-table-column>
                    <el-table-column prop="number" label="预约人数"> </el-table-column>
                    <el-table-column prop="project_name" label="预约项目" min-width="200">
                        <!-- <template slot-scope="scope">
                           <div v-for="(item,i) in scope.row.projects" :key="i">
                                {{item.name}}
                                <template v-if="scope.row.project[i]&&scope.row.project[i].staff">
                                    ({{scope.row.project[i].staff.name}})
                                </template>
                            </div>
                        </template> -->
                    </el-table-column>
                    <!-- <el-table-column prop="title" label="预约方式" min-width="80">
                        <template slot-scope="scope">
                            {{scope.row.mode | typeMode}}
                        </template>
                    </el-table-column> -->
                    <el-table-column prop="orders_payable" label="总金额"> </el-table-column>
                    <!-- <el-table-column prop="advance_amount" label="预付金额"> </el-table-column> -->
                    <el-table-column prop="out_trade_no" min-width="170" label="订单编号"> </el-table-column>
                    <el-table-column prop="remarks" label="备注" min-width="130">
                        <template slot-scope="scope">
                            <span class="line-2">{{scope.row.remarks}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" >
                        <template slot-scope="scope">
                            <span class="line-2">{{scope.row.status==1?'正常':'消单'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" width="80" label="操作">
                        <template slot-scope="scope" >
                            <span @click="setRow(1,scope.row)" class="tab-table-text">查看</span>
                            <!-- <template v-if="scope.row.status==1&&!scope.row.is_bill"> -->
                                <!-- <span @click="setRow(2,scope.row)" class="tab-table-text">编辑</span> -->
                                <!-- <span @click="setRow(4,scope.row)" class="tab-red-text">消单</span> -->
                                <!-- <span @click="setRow(3,scope.row)" class="tab-lv-text">开单</span> -->
                            <!-- </template> -->
                        </template>
                    </el-table-column>
                </el-table>
                <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="paging.page" :page-size="paging.limit" layout="sizes,prev, pager, next, jumper" :total="paging.total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <router-view></router-view>
        <el-dialog
        title="消单原因"
        width="500px"
        append-to-body
        :before-close="handleClose"
        :close-on-click-modal="false"
        :visible.sync="isSingle">
            <el-alert
                show-icon
                title="订单取消后无法恢复，请考虑好再操作"
                type="warning">
            </el-alert>
            <h3>请选择取消订单原因</h3>
            <div class="single-box">
                <div
                class="single-chind"
                v-for="(item,i) in causeList"
                :key="i"
                @click="causeIndex=i"
                >
                    <span>{{item}}</span>
                    <i
                    :class="causeIndex==i?'el-icon-success active-icon':'iconfont icon-weixuanzhong'"
                    class=""></i>
                </div>
                <div class="single-chind" style="justify-content: flex-start;">
                    其他：<input v-model.trim="textCause" type="text">（请填写）
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">取 消</el-button>
                <el-button type="primary" @click="singleClick">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="消单申请" width="500px" :close-on-click-modal="false" :visible.sync="isApply">
            <el-descriptions :column="1" border>
                <el-descriptions-item label="订单编号"> {{ruleForm.order_num}} </el-descriptions-item>
                <el-descriptions-item label="顾客姓名"> {{ruleForm.name}} </el-descriptions-item>
                <el-descriptions-item label="手机号码"> {{ruleForm.mobile}} </el-descriptions-item>
                <el-descriptions-item label="消单金额"> {{ruleForm.advance_amount}} </el-descriptions-item>
                <el-descriptions-item label="消单原因">

                    <div @click="selectCause" style="cursor: pointer;">
                        <span v-if="cause">
                            {{cause}}
                        </span>
                        <div v-else style="text-align: right;">
                            请选择<i  class="el-icon-arrow-right"></i>
                        </div>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
            <span slot="footer" class="dialog-footer">
                <el-button @click="isApply=false;">取 消</el-button>
                <el-button type="primary" @click="delReserve">确 定</el-button>
            </span>
        </el-dialog>


        <!-- 开单详情 -->
        <el-dialog
        title="查看详情"
        width="600px"
        :close-on-click-modal="false"
        :visible.sync="isInfo">
            <el-descriptions  :column="2" border>
                <el-descriptions-item label="订单编号">{{info.out_trade_no}}</el-descriptions-item>
                <el-descriptions-item label="顾客姓名">{{info.username}}</el-descriptions-item>
                <el-descriptions-item label="性别">{{info.gender | typeGender}}</el-descriptions-item>
                <el-descriptions-item label="手机号码">{{info.phone}}</el-descriptions-item>
                <!-- <el-descriptions-item label="预约方式">{{info.mode | typeMode}}</el-descriptions-item> -->
                <el-descriptions-item label="预约日期">{{info.re_date}}</el-descriptions-item>
                <el-descriptions-item label="预计到店时间">{{info.re_time}}</el-descriptions-item>
                <el-descriptions-item label="预约人数">{{info.number}}</el-descriptions-item>
                <el-descriptions-item label="预约项目" :span="2">
                    {{info.project_name}}
                    <!-- <div v-for="(item,i) in info.projects" :key="i">
                        {{item.name}}
                        <template v-if="info.project[i]&&info.project[i].staff">
                            ({{info.project[i].staff.name}})
                        </template>
                    </div> -->
                </el-descriptions-item>
                <!-- <el-descriptions-item label="预约技师">

                </el-descriptions-item> -->
                <el-descriptions-item label="订单总额">{{info.orders_payable}}</el-descriptions-item>
                <!-- <el-descriptions-item label="预付金额">{{info.advance_amount}}</el-descriptions-item> -->
                <!-- <el-descriptions-item  label="会员卡号">
                    <span v-if="info.user">
                        {{info.user.vip_no}}
                    </span>
                </el-descriptions-item> -->
                <el-descriptions-item  label="剩余金额">
                    <span>
                        {{info.balance}}
                    </span>
                </el-descriptions-item>
                <!-- <el-descriptions-item label="">

                </el-descriptions-item> -->
                <el-descriptions-item :span="2" label="备注">{{info.remarks}}</el-descriptions-item>
                <el-descriptions-item v-if="info.return_remark" label="消单原因" :span="2">{{info.return_remark}}</el-descriptions-item>
            </el-descriptions>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="isInfo = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            recordList: [],
            causeList:[
                '顾客行程有变，不能来店',
                '顾客约错门店，重新预约其他门店',
                '顾客找不到门店位置',
                '超过预约时间，但联系不上顾客',
                '顾客觉得停车不方便',
                '顾客指定的技师被约满',
                '房间满员/顾客不愿意拼房'
            ],
            cause:'',
            causeIndex:null,
            textCause:'',
            loading: true,
            loading2: false,
            isBtn: false,
            isInfo: false,
            dialogVisible: false,
            isSingle:false,//消单原因
            isApply:false,//消单申请
            info:{},
            ruleForm:{},
            paging: {
                name: '',//姓名
                mobile:'',//手机
                order_num:'',//单号
                mode:'',//预约方式 0大众点评 1小程序 2电话 3我的管家
                start_date:'',  //开始日期
                end_date:'',    //结束日期
                start_time: '',//开始时间
                end_time: '',//结束时间
                store_id:'',
                page: 1,
                total: 0,
                limit: 10,
            },
            form: {
                date: "",
            },
            shopList:[],
            isDerive:false,
            tableData: []
        };
    },
    watch:{
        isApply(val){
            if(!val){
                this.cause="";
                this.causeIndex = null;
                this.textCause = "";
            }
        }
    },
    created() {
        if (this.$route.path == '/make') {
            this.homegetStore();
        }
    },
    methods: {
        async derive(){
            this.isDerive = true;
            setTimeout(()=>{
                this.isDerive = false;
            },3000)
            let obj = Object.assign({},this.paging);
            obj.end_date = obj.start_date?.[1];
            obj.start_date = obj.start_date?.[0];

            obj.end_time = obj.start_time?.[1];
            obj.start_time = obj.start_time?.[0];
            this.utils.derive('admin/orders/exportReserve',obj);
        },
        async homegetStore(){
            let {code,data} = await this.$Http.homegetStore();
            if(code){
                // this.paging.store_id = data[0].id;
                this.shopList = data;
                this.handleCurrentChange(1);
            }
        },
        async delReserve(){
            if(!this.cause)return this.$message.error('请选择消单原因!')
            let {code,data} = await this.$Http.delReserve({id:this.ruleForm.id,return_remark:this.cause});
            if(code){
                this.$message.success('消单提交成功!');
                this.isApply = false;
                this.repairGetList()
            }
        },
        selectCause(){
            this.isSingle=true;
            if(this.cause){
                let index = this.causeList.findIndex(v=>v==this.cause);
                this.causeIndex = index;
                if(index==1)this.textCause = this.cause;
            }
        },
        async setRow(type, row) {
            console.log(row,'row');
            if (type == 1) {
                this.isInfo = true;
                this.info = Object.assign({}, row);
            } else if (type == 2){
                this.utils.goUrl('/makeInfo?title=预约修改&id='+row.id)
            }else if (type == 3){
                this.utils.goUrl(`/billing?id=${row.id}&user_id=${row.user?row.user.id:''}${row.order_num?'&out_trade_no='+row.order_num:''}`)
            }else{
                this.isApply = true;
                this.ruleForm = row;
            }
        },
        singleClick(){
            if(this.textCause){
                 this.cause = this.textCause;
            }else if(this.causeIndex!=null){
                this.cause = this.causeList[this.causeIndex];
            }
            this.isSingle = false
        },
        handleClose(dom) {
            this.isSingle = false;
            this.causeIndex = null;
            this.textCause = "";
            dom && dom();
        },
        async repairGetList() {
            let obj = Object.assign({},this.paging);
            obj.end_date = obj.start_date?.[1];
            obj.start_date = obj.start_date?.[0];

            obj.end_time = obj.start_time?.[1];
            obj.start_time = obj.start_time?.[0];
            this.loading = true;
            let { code, data } = await this.$Http.ordersgetRoomStatus(obj);
            this.loading = false;
            if (code) {

                this.tableData = data.data;
                this.paging.total = data.total;
            }
        },
        reset() {//重置
            this.paging = this.$options.data().paging;
            // this.paging.store_id = this.shopList[0].id;
            this.form.date = '';
            this.handleCurrentChange(1)
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList()
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.repairGetList()
        }
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}
.single-box{
    margin-top: 20px;
    .single-chind{
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        min-height: 30px;
        input{
            border-width: 0 0 1px 0;
            padding: 0 5px 5px 5px;
            width: max-content;
            max-width: 330px;
            &:focus{
                outline: none;
            }
        }
        .active-icon{
            color: #D9001B;
        }
        i{
            font-size: 22px;
        }
    }
}
.vs-table-box{
    .el-icon-star-on{
        font-size: 36px;
        color: #FFFF00;
        -webkit-text-stroke: 1px #CC93E1;
        // text-shadow: -1px 1px 0 #CC93E1, 1px 1px 0 #CC93E1,1px -1px 0 #CC93E1,-1px -1px 0 #CC93E1;
    }
}
</style>